<template>
  <list-detail-layout :col-props="{md:[18,6]}">
    <template #detailMain>
      <car-model-detail-main :time="time" @tabChange="tabChange"></car-model-detail-main>
    </template>
    <template #detailRight>
      <car-model-base-info></car-model-base-info>
      <car-model-config-file :vin="vin"></car-model-config-file>
      <car-model-update-statistic :vehicle-id="activeVehicleId" :time="countTime"></car-model-update-statistic>
    </template>
  </list-detail-layout>
</template>
<script>
import ListDetailLayout from '@/views/components/ListDetailLayout'
import CarModelDetailMain from './CarModelDetailMain'
import CarModelUpdateStatistic from './CarModelUpdateStatistic'
import CarModelBaseInfo from './CarModelBaseInfo'
import CarModelConfigFile from './CarModelConfigFile'
export default {
  components: {
    CarModelDetailMain,
    CarModelUpdateStatistic,
    CarModelBaseInfo,
    CarModelConfigFile,
    ListDetailLayout
  },
  props: {
    time: {
      type: Number,
      default: 357159
    },
    vin: {
      type: String,
      default: ''
    }
  },
  computed: {
  },
  watch: {
    time: {
      handler () {
        this.getVehicleDetail()
      },
      immediate: true
    }
  },
  data () {
    return {
      activeVehicleId: '',
      countTime: 0
    }
  },
  methods: {
    tabChange(){
      this.getVehicleDetail()
    },
    // 获取当前车辆信息
    getVehicleDetail () {
      this.activeVehicleId = ''
      if (!this.vin) {
        return
      }
      this.$store.dispatch('getVehicleInfoData', { vin: this.vin }).then(res => {
        this.activeVehicleId = res.data.id
        this.countTime = Date.now()
      }).catch((err) => {
        console.log(err)
      })
    }
  }
}
</script>
<style lang="less" scoped>
.carModelDetailComp {
  flex:1 0 0;
  overflow:hidden;
  display: flex;
  flex-direction: column;
  .carModelDetailCompMain {
    flex:1 0 0;
    border-bottom:1px solid @borderColor;
    border-top:1px solid @borderColor;
    overflow:hidden;
  }
  .carModelDetailCompFooter {
    flex:none;
    padding:15px 24px 15px 24px;
  }
  .carModelDetailLeft {
    overflow: auto;
    padding:24px;
  }
  .carModelDetailRight {
    border-left:1px solid @borderColor;
    overflow: auto;
    padding:24px;
  }
}
</style>
